import React, { Component, ComponentClass } from 'react';
import Taro from '@tarojs/taro';
import {Image, Input, Navigator, Picker, Text, View} from '@tarojs/components'
import {h5Wx} from "../../../utils/h5.service";
import {
  BASE_URL,
  TARO_ENV,
  UPLODE_FALE,
  ALIBABA_SELECT_GOODS_LIST,
  SYSTEM_UPLOAD,
  ALIBABA_DETAILS,
  ALIBABA_INSERT_ALIBABA_GOODS,
  ALIBABA_UPDATE_ALIBABAGOODS
} from "../../../constants/api";
import {http} from '../../../utils/http';
import GzhAuth from "../../../components/gzh-auth/gzh-auth";
import {vcmonitor} from "../../../utils/tools";
import {getDateInfoDate, setRangeTimeData, getDateInfoTime, getDateInfo} from "../../../utils/handlerPublicCode"
import {newHttp} from "../../../utils/request";
import fileUpload from "../../../utils/fileUpload";
import './index.scss'

type StateProps = {
  formData: any
  shopList: any
  productTypeList: any
  rangeTimeData: any
  tempArr: any
  validityList: any
  isOrNot: any
  invoiceList: any
  goodsList: any
  supplierId: number
}

class productForm extends Component {
  state: StateProps = {
    supplierId: 0,
    tempArr: {// 用来存储临时的数据,在保存和编辑的时候会重新组织给表单数据
      gmt_start_date: '',
      gmt_start_time: '',
      gmt_end_date: '',
      gmt_end_time: '',
      range_from_date: '',
      range_from_time: '',
      range_to_date: '',
      range_to_time: '',
      validity_info: { // 有效期信息
        validity_type: "FIXED",
        validity_period: 10,
        range_to: '',
        range_from: ''
      },
      item_combo_package: { //套餐详情
        package_notes: [],
        package_content_list: [{
          content_unit_list: [
            {
              unit: "",
              price: "",
              num: '',
              content: "",
              title: ""
            }
          ],
          title: ""
        }],
        graphic_text_list: [{
          image_urls: [],
          title: "",
          desc: ""
        }],
        service_flow_list: [{
          unit: "",
          service_content: "",
          num: 0,
          explanation: ""
        }],
      },
      buyer_tips_template: {
        free_wifi: false,
        limit_user_num: false,
        need_reserve: false,
        supply_invoice: false,
        free_park_hours: 0,
        user_num_limited: 0,
        free_park: false,
        reserve_note: "",
        invoice_types: '',
        park_fee_per_hour: 0,
        park_fee_upper_bound_per_day: 0
      },
      buy_limit_list: [{
        limit_num: '',
        limit_type:'',
      }],
      goodsListValue: [],
      category_id: '',
      picture_details: [],
    },
    formData: {
      is_supplier:0,
      is_new_goods:1,
      allow_check_refund:false,
      use_upload_detail_images:true,
      price: '',
      original_price: '',
      inventory: '',
      is_purchase:false,
      category_id: '',
      item_type: '',
      subject: '',
      display_channel: 'ALL',
      verify_times: 0,
      gmt_end: '',
      gmt_start: '',
      picture_details: [],
      verify_frequency: 'single',
      category_name: '',
      buyer_notes: '',
      item_combo_package: '',
      buyer_tips_template: '',
      unavailable_periods: '',
      buy_limit_list: '',
      available_periods: '',
      validity_info: '', // 关联商品
      relevance_shop: '',
      upload_detail_images:'',
    },
    productTypeList: [
      {
        value: 'COMBO',
        label: '普通产品'
      },
      {
        value: 'VOUCHER',
        label: '代金券产品'
      }
    ],
    shopList:[],
    rangeTimeData: [],
    validityList: [
      {
        value: 'FIXED',
        label: '有效期'
      },
      {
        value: 'RELATIVE',
        label: '有效天数'
      }
    ],
    invoiceList: [
      {
        value: 'ELECTRONIC_INVOICE',
        label: '电子发票'
      },
      {
        value: 'PAPER_INVOICE',
        label: '纸质发票'
      }
    ],
    isOrNot: [
      {
        value: 'true',
        label: '是'
      },
      {
        value: 'false',
        label: '否'
      },
    ],
    goodsList: [],

  }
  flag = true

  // 图片大图
  imgClick(img) {
    Taro.previewImage({
      urls: [img],
      current: img
    })
  }

  // 深拷贝
 deepClone(source) {
    if (!source && typeof source !== 'object') {
      throw new Error('error arguments', 'deepClone')
    }
    const targetObj = source.constructor === Array ? [] : {}
    Object.keys(source).forEach(keys => {
      if (source[keys] && typeof source[keys] === 'object') {
        targetObj[keys] = this.deepClone(source[keys])
      } else {
        targetObj[keys] = source[keys]
      }
    })
    return targetObj
  }
  async UNSAFE_componentWillMount() {
    await vcmonitor(this)
    if (TARO_ENV === 'h5') {
      await h5Wx.getConfig()
    }
    this.getGoodsList()
    this.setState({rangeTimeData: setRangeTimeData()})
    const {uuid, type, supplierId} = Taro.getCurrentInstance().router.params;
    if (uuid) {
      this.getDetail(uuid, type)
    }
    this.setState({supplierId, type, supplierId})
  }
  async componentDidShow() {
    const pages = Taro.getCurrentPages();
    const currPage = pages[pages.length - 1];
    let textareaValue;
    let textareaKey;
    if (process.env.TARO_ENV === 'h5') {
      textareaValue = currPage && currPage.state && currPage.state.textareaValue;
      textareaKey = currPage && currPage.state && currPage.state.textareaKey;
    } else {
      textareaValue = currPage && currPage.__data__ && currPage.__data__.textareaValue;
      textareaKey = currPage && currPage.__data__ && currPage.__data__.textareaKey;
    }
    const {formData} = this.state;
    formData[textareaKey] = textareaValue;
    this.setState({
      formData
    });
  }
  setFormData(formData) {
    this.setState({
      formData
    });
  }
  // 去空
  delNull(obj) {
    const newObj = {}
    for (const i in obj) {
      if ((obj[i] || obj[i] === '' || obj[i] === 0) && (obj[i] !== 'null')) {
        newObj[i] = obj[i]
      }
    }
    return newObj
  }
  getTimeVS(val1, val2) {
    const a = new Date(val1);
    const b = new Date(val2);
    return a.getTime() >= b.getTime();
  }
  // type:0保存，1提交审核
  async save(type) {
    Taro.showToast({title: '加载中...', duration: 20000, mask: true, icon: 'loading'})
    const {formData, tempArr} = this.state
    const params = this.deepClone(formData)
    if((Number(formData.price)/Number(formData.original_price))>0.75&&formData.item_type!='VOUCHER'){
      Taro.showToast({
        title: '商品折扣（售价/原价）不得高于75%！',
        icon: 'none',
        mask: true
      });
      return
    }
    if (!tempArr.gmt_start_date || !tempArr.gmt_start_time) {
      Taro.showToast({
        title: '请选择开售日期！',
        icon: 'none',
        mask: true
      });
      return
    }
    if (!tempArr.gmt_end_date || !tempArr.gmt_end_time) {
      Taro.showToast({
        title: '请选择停售日期！',
        icon: 'none',
        mask: true
      });
      return
    }
    if (tempArr.validity_info.validity_type == 'FIXED' && (!tempArr.range_from_date|| !tempArr.range_from_time)) {
      Taro.showToast({
        title: '请选择开始日期！',
        icon: 'none',
        mask: true
      });
      return
    }
    if (tempArr.validity_info.validity_type == 'FIXED' && (!tempArr.range_to_date || !tempArr.range_to_time)) {
      Taro.showToast({
        title: '请选择结束日期！',
        icon: 'none',
        mask: true
      });
      return
    }
    if (String(tempArr.buyer_tips_template.supply_invoice) == 'true' && (!tempArr.buyer_tips_template.invoice_types || tempArr.buyer_tips_template.invoice_types.length <= 0)) {
      Taro.showToast({
        title: '请选择发票类型！',
        icon: 'none',
        mask: true
      });
      return
    }
    params.use_upload_detail_images = 'false'
    params.is_supplier = 1
    params.is_app = 1
    params.is_push = type == 1 ? 'true' : 'false'
    params.category_id = JSON.stringify(tempArr.category_id)
    params.item_combo_package = JSON.stringify(tempArr.item_combo_package)
    params.buyer_tips_template = JSON.stringify(tempArr.buyer_tips_template)
    params.buy_limit_list = JSON.stringify(tempArr.buy_limit_list)
    tempArr.validity_info.range_from = tempArr.range_from_date + ' ' + tempArr.range_from_time
    tempArr.validity_info.range_to = tempArr.range_to_date + ' ' + tempArr.range_to_time
    params.validity_info = JSON.stringify(tempArr.validity_info)
    params.gmt_start = tempArr.gmt_start_date + ' ' + tempArr.gmt_start_time
    params.gmt_end = tempArr.gmt_end_date + ' ' + tempArr.gmt_end_time
    params.picture_details = tempArr.picture_details
    params.supplier_id = this.state.supplierId
    if (this.getTimeVS(params.gmt_start, params.gmt_end)) {
      Taro.showToast({
        title: '商品停售日期不能小于开售日期！',
        icon: 'none',
        mask: true
      });
      return
    }
    if (tempArr.validity_info.validity_type == 'FIXED' && this.getTimeVS(tempArr.validity_info.range_from, tempArr.validity_info.range_to)) {
      Taro.showToast({
        title: '有效期结束日期不得小于开始日期！',
        icon: 'none',
        mask: true
      });
      return
    }
    const finalParams = this.delNull(params)
    const {uuid} = Taro.getCurrentInstance().router.params;
    let api = ALIBABA_INSERT_ALIBABA_GOODS
    if (uuid) {
      finalParams.uuid = uuid
      api = ALIBABA_UPDATE_ALIBABAGOODS
    } else {
      finalParams.relevance_shop = ''
      api = ALIBABA_INSERT_ALIBABA_GOODS
    }
    const data = await http.postCar(api, finalParams,true )
    if (data) {
      Taro.showToast({
        title: data.message,
        icon: 'none',
        duration: 2000
      })
      await Taro.navigateBack({delta: 1})
    } else {
      setTimeout(function(){
        Taro.showToast({
          title: data.message,
          icon: 'none',
          duration: 2000
        })
      }, 1000)
    }
  }
  // 下拉框
  handleChange(field, val) {
    const {formData, shopList} = this.state
    if (typeof val == 'string') {
      val = val.replace(/^\s|\s$/, "");
    }
    if (field == 'item_type') {
      formData[field] = val == 1 ? 'VOUCHER' : 'COMBO'
    } else if (field == 'store_ids') {
      formData[field] = [{
        name: shopList[val].name,
        alibaba_store_id: shopList[val].alibaba_store_id
      }]
    } else if (field == 'is_purchase' || field == 'allow_check_refund') {
      formData[field] = val == 0 ? 'true' : 'false'
    } else {
      formData[field] = val
    }
    this.setFormData(formData)
  }
  // 处理临时数据
  handleChangeTemp(field, val, field2?) {
    const {tempArr, rangeTimeData} = this.state
    if (typeof val == 'string') {
      val = val.replace(/^\s|\s$/, "");
    }
    if (field.indexOf('_date') > 0) {
      val = getDateInfoDate(val)
      tempArr[field] = val
    } else if (field.indexOf('_time') > 0) {
      tempArr[field] = getDateInfoTime(val, rangeTimeData)
    } else if (field2 == 'validity_type') {
      tempArr[field][field2] = val == 1 ? 'RELATIVE' : 'FIXED'
    } else if (field2 == 'need_reserve' || field2 == 'free_park' || field2 == 'free_wifi' || field2 == 'limit_user_num' || field2 == 'supply_invoice') {
      tempArr[field][field2] = val == 0 ? 'true' : 'false'
    } else if (field2 == 'invoice_types') {
      tempArr[field][field2] = val == 0 ? 'ELECTRONIC_INVOICE' : 'PAPER_INVOICE'
    } else if (field2) {
      tempArr[field][field2] = val
    } else {
      tempArr[field] = val
    }
    this.setState({
      tempArr
    })
  }
  // 处理多层的数据
  handleChangeTempArr(val, field, field2?) {
    const {tempArr} = this.state
    if (typeof val == 'string') {
      val = val.replace(/^\s|\s$/, "");
    }
    if (field2) {
      tempArr[field][field2] = val
    } else {
      tempArr[field] = val
    }
    this.setState({
      tempArr
    })
  }
  // 产品类型选择
  onProductTypeChange({detail: {value}}) {
    const {formData} = this.state;
    this.setState({
      formData
    });
  }
  // 增加套餐详情
  addMealInfo() {
    const {tempArr} = this.state
    tempArr.item_combo_package.package_content_list.push({
      content_unit_list: [
        {
          unit: "",
          price: "",
          num: '',
          content: "",
          title: ""
        }
      ],
      title: ""
    })
    this.setState({
      tempArr
    })
  }
  delMealInfo(index) {
    const {tempArr} = this.state
    tempArr.item_combo_package.package_content_list.splice(index, 1)
    this.setState({
      tempArr
    })
  }
  addMealInfoContent(index) {
    const {tempArr} = this.state
    tempArr.item_combo_package.package_content_list[index].content_unit_list.push({
      unit: "",
      price: "",
      num: '',
      content: "",
      title: ""
    })
    this.setState({
      tempArr
    })
  }
  delMealInfoContent(index, key) {
    const {tempArr} = this.state
    tempArr.item_combo_package.package_content_list[index].content_unit_list.splice(key, 1)
    this.setState({
      tempArr
    })
  }
  addMealPicInfoContent() {
    const {tempArr} = this.state
    tempArr.item_combo_package.graphic_text_list.push({
      image_urls: [],
      title: "",
      desc: ""
    })
    this.setState({
      tempArr
    })
  }
  delMealPicInfoContent(index) {
    const {tempArr} = this.state
    tempArr.item_combo_package.graphic_text_list.splice(index, 1)
    this.setState({
      tempArr
    })
  }
  // 获取商品类目列表
  async getGoodsList() {
    const params = {
      is_supplier: 1,
      is_app: 1,
      parent_category_id: 0,
      categoryLevel: 0,
      supplier_id: this.state.supplierId
    }
    const res = await newHttp.catchGet(ALIBABA_SELECT_GOODS_LIST, params)
    const list = []
    if (res && res.length > 0) {
      for (const item of res) {
        list.push({
          value: item.category_id,
          label: item.category_name,
          level: item.category_level,
          is_leaf: item.is_leaf,
        })
      }
    }
    const goodsList = []
    goodsList.push(list)
    this.setState({
      goodsList
    });
  }
  async handleChangeGoods(val, index) {
    const {goodsList, tempArr} = this.state
    const params = {
      is_supplier: 1,
      is_app: 1,
      parent_category_id: goodsList[index][val]['value'],
      categoryLevel: goodsList[index][val]['level'],
      supplier_id: this.state.supplierId
    }
    if (!goodsList[index][val]['is_leaf']) {
      const res = await newHttp.catchGet(ALIBABA_SELECT_GOODS_LIST, params)
      const list = []
      if (res && res.length > 0) {
        for (const item of res) {
          list.push({
            value: item.category_id,
            label: item.category_name,
            level: item.category_level,
            is_leaf: item.is_leaf,
          })
        }
      }
      goodsList[index+1] = list
    } else {
      tempArr.category_id = {
        alibaba_category_id: goodsList[index][val].value,
        category_name: goodsList[index][val].label,
      }
    }
    tempArr.goodsListValue[index] = goodsList[index][val]['label']
    tempArr.goodsListValue[index + 1] = ''
    this.setState({
      goodsList,
      tempArr
    });
  }
  // 阿拉伯数字转中文
  toChinesNum(num) {
    const changeNum = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']
    const unit = ['', '十', '百', '千', '万']
    num = parseInt(num)
    const getWan = (temp) => {
      const strArr = temp.toString().split('').reverse()
      let newNum = ''
      const newArr = []
      strArr.forEach((item, index) => {
        newArr.unshift(item === '0' ? changeNum[item] : changeNum[item] + unit[index])
      })
      const numArr = []
      newArr.forEach((m, n) => {
        if (m !== '零') numArr.push(n)
      })
      if (newArr.length > 1) {
        newArr.forEach((m, n) => {
          if (newArr[newArr.length - 1] === '零') {
            if (n <= numArr[numArr.length - 1]) {
              newNum += m
            }
          } else {
            newNum += m
          }
        })
      } else {
        newNum = newArr[0]
      }
      return newNum
    }
    const overWan = Math.floor(num / 10000)
    let noWan = num % 10000
    if (noWan.toString().length < 4) {
      noWan = '0' + noWan
    }
    return overWan ? getWan(overWan) + '万' + getWan(noWan) : getWan(num)
  }
  // 上传文件的回调
  // type:0轮播1套餐
  chooseImage = (callback, count, type, index?) => {
    const {tempArr} = this.state
    const inp = document.createElement('input');
    inp.setAttribute('type', 'file');
    inp.setAttribute('style', 'display: none;');
    inp['accept'] = '.jpg,.jpeg,.png,.gif'
    inp.multiple = true
    document.body.appendChild(inp)
    inp.click()
    inp.onchange = (e: any) => {
      const files = e.target.files
      for (const item of files) {
        if (item.type.indexOf('image') < 0) {
          Taro.showToast({
            title: '请选择图片文件',
            icon: 'none',
            mask: true
          });
          return
        }
      }
      if (type == 0 && (files.length > 5 || tempArr.picture_details.length+files.length > 5)) {
        Taro.showToast({
          title: '最多上传5张商品图片',
          icon: 'none',
          mask: true
        });
        return false
      }
      if (type == 1 && (files.length > 5 || tempArr.item_combo_package.graphic_text_list[index].image_urls.length+files.length > 5)) {
        Taro.showToast({
          title: '最多上传5张商品图片',
          icon: 'none',
          mask: true
        });
        return false
      }
      callback(e.target.files, files.length)
      document.body.removeChild(inp)
    }
  }
  uploadFile = (files, length, callback) => {
    this.handlerFile(SYSTEM_UPLOAD, files, length, callback, 'file')
  }
  handlerFile = async (api, files, length, callback, type, title = '上传中...') => {
    Taro.showToast({title, duration: 20000, mask: true, icon: 'loading'})
    for (let i = 0; i < length; i++) {
      const file = files[i]
      const formData = new FormData();
      formData.append(type, file);
      try {
        const data = await fileUpload({ url: api, data: formData })
        if (type === 'face') {
          callback(data.data.domain + data.data.url)
        } else {
          callback(data.data)
        }
        if (i === length -1){
          Taro.hideToast()
        }
      } catch (e) {
        Taro.showToast({
          title: e.message,
          icon: 'none'
        })
      }
    }
  }
  onFileChange = () => {
    const {tempArr} = this.state
    const that = this;
    if (TARO_ENV === 'h5') {
      this.chooseImage(async (f, length) => {
        this.uploadFile(f, length, (data) => {
          tempArr.picture_details.push(data)
          if (tempArr.picture_details.length > 5) {
            Taro.showToast({
              title: '最多上传5张商品图片',
              icon: 'none',
              mask: true
            });
            return false
          }
          that.setState({tempArr})
        })
      }, 5, 0)
    } else {
      Taro.chooseImage({
        count: 5,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: res => {
          // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
          const tempFilePaths = res.tempFilePaths;
          if (tempFilePaths.length > 5 || tempArr.picture_details.length+tempFilePaths.length > 5) {
            Taro.showToast({
              title: '最多上传5张商品图片',
              icon: 'none',
              mask: true
            });
            return false
          }
          //启动上传等待中...
          Taro.showToast({
            title: '正在上传...',
            icon: 'loading',
            mask: true
          });
          let uploadImgCount = 0;
          for (let i = 0, h = tempFilePaths.length; i < h; i++) {
            Taro.uploadFile({
              url: BASE_URL + UPLODE_FALE,
              filePath: tempFilePaths[i],
              name: 'file',
              formData: {
                'imgIndex': i
              },
              header: http.getHeader(),
              success: function (res) {
                uploadImgCount++;
                const data = JSON.parse(res.data);
                if (res.statusCode == 400) {
                  Taro.showToast({
                    title: data.message,
                    icon: 'none'
                  });
                  return;
                }
                tempArr.picture_details.push(data.imageUrl)
                if (tempArr.picture_details.length > 5) {
                  Taro.showToast({
                    title: '最多上传5张商品图片',
                    icon: 'none',
                    mask: true
                  });
                  return false
                }
                that.setState({tempArr})
                Taro.hideToast();
              },
              fail: function (res) {
                Taro.hideToast();
                Taro.showModal({
                  title: '错误提示',
                  content: '上传图片失败',
                  showCancel: false
                });
              }
            });
          }
        }
      });
    }
  }
  onFileChangePic = (index) => {
    const {tempArr} = this.state
    const that = this;
    if (TARO_ENV === 'h5') {
      this.chooseImage(async (f, length) => {
        this.uploadFile(f, length, (data) => {
          tempArr.item_combo_package.graphic_text_list[index].image_urls.push(data)
          if (tempArr.item_combo_package.graphic_text_list[index].image_urls.length > 5) {
            Taro.showToast({
              title: '最多上传5张商品图片',
              icon: 'none',
              mask: true
            });
            return false
          }
          that.setState({tempArr})
        })
      }, 5, 1, index)
    } else {
      Taro.chooseImage({
        count: 5,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: res => {
          // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
          const tempFilePaths = res.tempFilePaths;
          if (tempFilePaths.length > 5 || tempArr.item_combo_package.graphic_text_list[index].image_urls.length+tempFilePaths.length > 5) {
            Taro.showToast({
              title: '最多上传5张商品图片',
              icon: 'none',
              mask: true
            });
            return false
          }
          //启动上传等待中...
          Taro.showToast({
            title: '正在上传...',
            icon: 'loading',
            mask: true
          });
          let uploadImgCount = 0;
          for (let i = 0, h = tempFilePaths.length; i < h; i++) {
            Taro.uploadFile({
              url: BASE_URL + UPLODE_FALE,
              filePath: tempFilePaths[i],
              name: 'file',
              formData: {
                'imgIndex': i
              },
              header: http.getHeader(),
              success: function (res) {
                uploadImgCount++;
                const data = JSON.parse(res.data);
                if (res.statusCode == 400) {
                  Taro.showToast({
                    title: data.message,
                    icon: 'none'
                  });
                  return;
                }
                tempArr.item_combo_package.graphic_text_list[index].image_urls.push(data.imageUrl)
                if (tempArr.item_combo_package.graphic_text_list[index].image_urls.length > 5) {
                  Taro.showToast({
                    title: '最多上传5张商品图片',
                    icon: 'none',
                    mask: true
                  });
                  return false
                }
                that.setState({tempArr})
                Taro.hideToast();
              },
              fail: function (res) {
                Taro.hideToast();
                Taro.showModal({
                  title: '错误提示',
                  content: '上传图片失败',
                  showCancel: false
                });
              }
            });
          }
        }
      });
    }
  }
  goBack() {
    Taro.navigateBack({delta: 1})
  }

  async getDetail(uuid, type) {
    this.flag = false
    let {formData, tempArr} = this.state
    const exForm = {
      is_supplier: 1,
      is_app: 1,
      supplier_id: this.state.supplierId
    }
    const res = await newHttp.catchGet(ALIBABA_DETAILS + uuid, exForm)
    if (res) {
      formData = this.deepClone(res)
      formData.uuid = uuid
      if(res.is_new_goods){
        formData.is_new_goods=Number(res.is_new_goods)
      }
      if(!res.allow_check_refund){
        formData.allow_check_refund='false'
      }else{
        formData.allow_check_refund=JSON.parse(res.allow_check_refund);
      }
      if(!res.is_purchase){
        formData.is_purchase=false
      }else {
        formData.is_purchase=JSON.parse(res.is_purchase);
      }
      if (res.category_id) {
        tempArr.category_id = JSON.parse(res.category_id)
        tempArr.typeValText = tempArr.category_id.category_name
      }
      if (res.picture_details && res.picture_details.indexOf(',') > -1) {
        tempArr.picture_details = res.picture_details.split(',')
      } else if(!res.picture_details || res.picture_details == '') {
        tempArr.picture_details = []
      } else if (res.picture_details) {
        tempArr.picture_details[0] = res.picture_details
      }
      tempArr.validity_info = res.validity_info ? JSON.parse(res.validity_info) : {}
      tempArr.item_combo_package = res.item_combo_package ? JSON.parse(res.item_combo_package) : {
        package_notes: [],
        package_content_list: [{
          content_unit_list: [
            {
              unit: "",
              price: "",
              num: 0,
              content: "",
              title: ""
            }
          ],
          title: ""
        }],
        graphic_text_list: [{
          image_urls: [],
          title: "",
          desc: ""
        }],
        service_flow_list: [{
          unit: "",
          service_content: "",
          num: 0,
          explanation: ""
        }]
      }
      if (!tempArr.item_combo_package.package_notes) {
        tempArr.item_combo_package.package_notes = []
      }
      tempArr.buyer_tips_template = res.buyer_tips_template ? JSON.parse(res.buyer_tips_template) : {
        free_wifi: true,
        limit_user_num: true,
        need_reserve: true,
        supply_invoice: true,
        free_park_hours: 0,
        user_num_limited: 0,
        free_park: true,
        reserve_note: "",
        invoice_types: '',
        park_fee_per_hour: 0,
        park_fee_upper_bound_per_day: 0
      }
      tempArr.buy_limit_list = res.buy_limit_list ? JSON.parse(res.buy_limit_list) : [{
        limit_num: 0,
        limit_type: "1"
      }]
      tempArr.gmt_start_date= isNaN(res.gmt_start)&&!isNaN(Date.parse((res.gmt_start).replace(/-/g, '/'))) ? getDateInfo(res.gmt_start).split(' ')[0] : ''
      tempArr.gmt_start_time= isNaN(res.gmt_start)&&!isNaN(Date.parse((res.gmt_start).replace(/-/g, '/'))) ? getDateInfo(res.gmt_start).split(' ')[1] : ''
      tempArr.gmt_end_date= isNaN(res.gmt_end)&&!isNaN(Date.parse((res.gmt_end).replace(/-/g, '/'))) ? getDateInfo(res.gmt_end).split(' ')[0] : ''
      tempArr.gmt_end_time= isNaN(res.gmt_end)&&!isNaN(Date.parse((res.gmt_end).replace(/-/g, '/'))) ? getDateInfo(res.gmt_end).split(' ')[1] : ''
      tempArr.range_to_date= isNaN(tempArr.validity_info.range_to)&&!isNaN(Date.parse((tempArr.validity_info.range_to).replace(/-/g, '/'))) ? getDateInfo(tempArr.validity_info.range_to).split(' ')[0] : ''
      tempArr.range_to_time= isNaN(tempArr.validity_info.range_to)&&!isNaN(Date.parse((tempArr.validity_info.range_to).replace(/-/g, '/'))) ? getDateInfo(tempArr.validity_info.range_to).split(' ')[1] : ''
      tempArr.range_from_date= isNaN(tempArr.validity_info.range_from)&&!isNaN(Date.parse((tempArr.validity_info.range_from).replace(/-/g, '/'))) ? getDateInfo(tempArr.validity_info.range_from).split(' ')[0] : ''
      tempArr.range_from_time= isNaN(tempArr.validity_info.range_from)&&!isNaN(Date.parse((tempArr.validity_info.range_from).replace(/-/g, '/'))) ? getDateInfo(tempArr.validity_info.range_from).split(' ')[1] : ''
      this.flag = Taro.getCurrentInstance().router.params.type == 1 ? false : true
      this.setState({formData, tempArr})
    }
  }

  async componentDidMount() {}

  // 金额的保留两位小数
  handleChangePiceReturn(field, val) {
    if (typeof val == 'string') {
      val = val.replace(/^\s|\s$/, "");
    }
    if (val.indexOf('.') < 0) {
      val = val.replace(/\b(0+)/ig,"")
    }
    val = Number(val).toFixed(2)
    this.setState({[field]: val})
  }
  today = getDateInfoDate('')

  parkFeeUpperBoundPerDay(value) {
    const {tempArr} = this.state
    if (Number(tempArr.buyer_tips_template.park_fee_per_hour) > Number(value)) {
      Taro.showToast({
        title: '每小时停车费不可大于停车封顶金额！',
        duration: 2000,
        mask: true,
        icon: "none"
      })
      tempArr.buyer_tips_template.park_fee_upper_bound_per_day = ''
      this.setState({tempArr})
      return
    }
    tempArr.buyer_tips_template.park_fee_upper_bound_per_day = Number(value) > 0 ? Number(value).toFixed(2) : 0
    this.setState({tempArr})
  }

  render() {
    const {
      formData,
      productTypeList,
      rangeTimeData,
      tempArr,
      validityList,
      isOrNot,
      invoiceList,
      goodsList
    } = this.state;
    this.flag = Taro.getCurrentInstance().router.params.type == 1 ? false : true
    return (
      <View className={`product-form ${process.env.TARO_ENV === 'h5' ? 'h5' : ''}`}>
        <GzhAuth />
        <View className='product-form-block m-t-20' style='margin-top: 0;'>
          <View className='product-form-block-item border-bottom'>
            <View className='product-form-block-item-left require'>
              商品名称
            </View>
            <View className='product-form-block-item-right t-a-l'>
              <View className='value'>
                <Input
                  disabled={!this.flag}
                  placeholder='请输入商品名称'
                  onInput={({detail: {value}}) => {
                    const {formData} = this.state;
                    formData.subject = value;
                    this.setFormData(formData);
                  }}
                  value={formData.subject}
                />
              </View>
            </View>
          </View>
          <Picker
            disabled={!this.flag}
            mode='selector'
            range={productTypeList}
            rangeKey='label'
            onChange={({detail: {value}}) => this.handleChange('item_type', value)}
            value={formData.item_type}
          >
            <View className='product-form-block-item border-bottom'>
              <View className='product-form-block-item-left require'>
                产品选择
              </View>
              <View className='product-form-block-item-right t-a-r'>
                {!formData.item_type && <View className='mepty'>
                  请选择产品类型
                  <Text className='ret'>{`>`}</Text>
                </View>}
                {formData.item_type && productTypeList && productTypeList.map((item, index) => <View
                  className='value' key={index}
                >
                  {item.value == formData.item_type ? item.label : ''}
                  {index ==0 && this.flag && <Text className='ret'>{`>`}</Text>}
                </View>)}
              </View>
            </View>
          </Picker>
          <View className='product-form-block-item border-bottom'>
            <View className='product-form-block-item-left require'>
              商品库存
            </View>
            <View className='product-form-block-item-right t-a-l'>
              <View className='value proportion-after proportion-after-inventory'>
                <Input
                  disabled={!this.flag}
                  placeholder='请输入库存数'
                  type='number'
                  onBlur={({detail: {value}}) => {
                    formData.inventory = parseInt(value);
                    this.setFormData(formData);
                  }}
                  value={formData.inventory}
                />
              </View>
            </View>
          </View>
          <View className='product-form-block-item border-bottom'>
            <View className='product-form-block-item-left require'>
              {formData.item_type == 'VOUCHER' ? '代金券面值' : '商品原价'}
            </View>
            <View className='product-form-block-item-right t-a-l'>
              <View className='value proportion-after proportion-after-money'>
                <Input
                  disabled={!this.flag}
                  placeholder='请输入金额'
                  type='digit'
                  value={formData.original_price}
                  onBlur={({detail: {value}}) => {
                    formData.original_price = Number(value) > 0 ? Number(value).toFixed(2) : 0
                    this.setState({formData});}}
                />
              </View>
            </View>
          </View>
          <View className='product-form-block-item border-bottom'>
            <View className='product-form-block-item-left require'>
              商品售价
            </View>
            <View className='product-form-block-item-right t-a-l'>
              <View className='value proportion-after proportion-after-money'>
                <Input
                  disabled={!this.flag}
                  placeholder='请输入金额'
                  type='digit'
                  value={formData.price}
                  onBlur={({detail: {value}}) => {
                    formData.price = Number(value) > 0 ? Number(value).toFixed(2) : 0
                    this.setState({formData});}}
                />
              </View>
            </View>
          </View>
          {goodsList && goodsList.length > 0 && goodsList.map((item, index) => <Picker
            disabled={!this.flag}
            key={index}
            mode='selector'
            range={goodsList[index]}
            rangeKey='label'
            onChange={({detail: {value}}) => this.handleChangeGoods(value, index)}
            value={tempArr.goodsListValue[index]}
          >
            <View className='product-form-block-item border-bottom'>
              <View className='product-form-block-item-left require'>
                {`${this.toChinesNum(index+1)}级类目`}
              </View>
              <View className='product-form-block-item-right t-a-r'>
                {!tempArr.goodsListValue[index] && <View className={`${(tempArr.typeValText && index == 0 ) ? 'value' : 'mepty'}`}>
                  {(tempArr.typeValText && index == 0 )? tempArr.typeValText : '请选择商品类目'}
                  {this.flag && <Text className='ret'>{`>`}</Text>}
                </View>}
                {tempArr.goodsListValue[index] && <View
                  className='value'
                >
                  {tempArr.goodsListValue[index]}
                  {this.flag && <Text className='ret'>{`>`}</Text>}
                </View>}
              </View>
            </View>
          </Picker>)}
          {/*商品轮播图*/}
          <View className='product-form-block-item border-bottom picture-info-item'>
            <View className='product-form-block-item-left require'>
              轮播图
            </View>
            <View className='product-form-block-item-right'>
              <View className='product-form-block-group'>
                {!!tempArr.picture_details && tempArr.picture_details.map((item, index) => <View className='_image-border' key={index}>
                  {this.flag && <View className='_close' onClick={(e) => {
                    tempArr.picture_details.splice(index, 1)
                    this.setState({tempArr})
                    e.stopPropagation();
                  }}
                  >
                    <Text className='_font'>
                      x
                    </Text>
                  </View>}
                  <Image src={item} className='_image' onClick={() => this.imgClick(item)} />
                </View>)}
                {tempArr.picture_details && tempArr.picture_details.length < 5 && this.flag &&
                <View className='image-border' onClick={() => this.onFileChange()}>
                  <View className='add'>+</View>
                </View>}
              </View>
              {this.flag && <View className='picture-info-item-tip'>
                支持bmp,png,jpeg,jpg,gif格式建议宽高：1242*698px图片大小≤5M最多5张
              </View>}
            </View>
          </View>
        </View>
        <View className='product-form-block m-t-20'>
          <View className='product-form-block-item border-bottom'>
            <View className='product-form-block-item-left require'>
              开售日期
            </View>
            <View className='product-form-block-item-right t-a-r'>
              <Picker disabled={!this.flag} mode='date' onChange={({detail: {value}}) => this.handleChangeTemp('gmt_start_date', value)}
                value={tempArr.gmt_start_date}
              >
                {!tempArr.gmt_start_date && <View className='mepty'>
                  请选择日期
                  <Text className='ret'>{`>`}</Text>
                </View>}
                {tempArr.gmt_start_date && <View className='value' style={`color:${tempArr.gmt_start_date ? '#000' : '#c5c5c5'};`}>
                  {tempArr.gmt_start_date}
                  {this.flag && <Text className='ret'>{`>`}</Text>}
                </View>}
              </Picker>
            </View>
          </View>
          <View className='product-form-block-item border-bottom'>
            <View className='product-form-block-item-left require'>
              开售时间
            </View>
            <View className='product-form-block-item-right t-a-r'>
              <View style='display:none'>{rangeTimeData}</View>
              <Picker
                disabled={!this.flag}
                mode='multiSelector' // 多列选择
                onChange={({detail: {value}}) => this.handleChangeTemp('gmt_start_time', value)} // change事件
                range={rangeTimeData} //需要展示的数据
                value={tempArr.gmt_start_time} // 选择的下标
              >
                {!tempArr.gmt_start_time && <View className='mepty'>
                  请选择时间
                  <Text className='ret'>{`>`}</Text>
                </View>}
                {tempArr.gmt_start_time && <View className='value' style={`color:${tempArr.gmt_start_time ? '#000' : '#c5c5c5'};`}>
                  {tempArr.gmt_start_time}
                  {this.flag && <Text className='ret'>{`>`}</Text>}
                </View>}
              </Picker>
            </View>
          </View>
          <View className='product-form-block-item border-bottom'>
            <View className='product-form-block-item-left require'>
              停售日期
            </View>
            <View className='product-form-block-item-right t-a-r'>
              <Picker disabled={!this.flag} mode='date' onChange={({detail: {value}}) => this.handleChangeTemp('gmt_end_date', value)}
                value={tempArr.gmt_end_date}
              >
                {!tempArr.gmt_end_date && <View className='mepty'>
                  请选择日期
                  <Text className='ret'>{`>`}</Text>
                </View>}
                {tempArr.gmt_end_date && <View className='value' style={`color:${tempArr.gmt_end_date ? '#000' : '#c5c5c5'};`}>
                  {tempArr.gmt_end_date}
                  {this.flag && <Text className='ret'>{`>`}</Text>}
                </View>}
              </Picker>
            </View>
          </View>
          <View className='product-form-block-item border-bottom'>
            <View className='product-form-block-item-left require'>
              停售时间
            </View>
            <View className='product-form-block-item-right t-a-r'>
              <Picker
                disabled={!this.flag}
                mode='multiSelector' // 多列选择
                onChange={({detail: {value}}) => this.handleChangeTemp('gmt_end_time', value)} // change事件
                range={rangeTimeData} //需要展示的数据
                value={tempArr.gmt_end_time} // 选择的下标
              >
                {!tempArr.gmt_end_time && <View className='mepty'>
                  请选择时间
                  <Text className='ret'>{`>`}</Text>
                </View>}
                {tempArr.gmt_end_time && <View className='value' style={`color:${tempArr.gmt_end_time ? '#000' : '#c5c5c5'};`}>
                  {tempArr.gmt_end_time}
                  {this.flag && <Text className='ret'>{`>`}</Text>}
                </View>}
              </Picker>
            </View>
          </View>
        </View>
        <View className='product-form-block m-t-20'>
          <Picker
            disabled={!this.flag}
            mode='selector'
            range={validityList}
            rangeKey='label'
            onChange={({detail: {value}}) => this.handleChangeTemp('validity_info', value, 'validity_type')}
            value={tempArr.validity_info.validity_type}
          >
            <View className='product-form-block-item border-bottom'>
              <View className='product-form-block-item-left require'>
                有效期
              </View>
              <View className='product-form-block-item-right t-a-r'>
                {!tempArr.validity_info.validity_type && <View className='mepty'>
                  请设置有效期信息
                  <Text className='ret'>{`>`}</Text>
                </View>}
                {tempArr.validity_info.validity_type && validityList && validityList.map((item, index) => <View
                  className='value' key={index}
                >
                  {item.value == tempArr.validity_info.validity_type ? item.label : ''}
                  {index ==0 && this.flag && <Text className='ret'>{`>`}</Text>}
                </View>)}
              </View>
            </View>
          </Picker>
          {tempArr.validity_info.validity_type && tempArr.validity_info.validity_type == 'FIXED' && <View>
            <View className='product-form-block-item border-bottom'>
              <View className='product-form-block-item-left require'>
                开始日期
              </View>
              <View className='product-form-block-item-right t-a-r'>
                <Picker disabled={!this.flag} mode='date' onChange={({detail: {value}}) => this.handleChangeTemp('range_from_date', value)}
                  value={tempArr.range_from_date}
                >
                  {!tempArr.range_from_date && <View className='mepty'>
                    请选择日期
                    <Text className='ret'>{`>`}</Text>
                  </View>}
                  {tempArr.range_from_date && <View className='value' style={`color:${tempArr.range_from_date ? '#000' : '#c5c5c5'};`}>
                    {tempArr.range_from_date}
                    {this.flag && <Text className='ret'>{`>`}</Text>}
                  </View>}
                </Picker>
              </View>
            </View>
            <View className='product-form-block-item border-bottom'>
              <View className='product-form-block-item-left require'>
                开始时间
              </View>
              <View className='product-form-block-item-right t-a-r'>
                <Picker
                  disabled={!this.flag}
                  mode='multiSelector' // 多列选择
                  onChange={({detail: {value}}) => this.handleChangeTemp('range_from_time', value)} // change事件
                  range={rangeTimeData} //需要展示的数据
                  value={tempArr.range_from_time} // 选择的下标
                >
                  {!tempArr.range_from_time && <View className='mepty'>
                    请选择时间
                    <Text className='ret'>{`>`}</Text>
                  </View>}
                  {tempArr.range_from_time && <View className='value' style={`color:${tempArr.range_from_time ? '#000' : '#c5c5c5'};`}>
                    {tempArr.range_from_time}
                    {this.flag && <Text className='ret'>{`>`}</Text>}
                  </View>}
                </Picker>
              </View>
            </View>
            <View className='product-form-block-item border-bottom'>
              <View className='product-form-block-item-left require'>
                结束日期
              </View>
              <View className='product-form-block-item-right t-a-r'>
                <Picker disabled={!this.flag} mode='date' onChange={({detail: {value}}) => this.handleChangeTemp('range_to_date', value)}
                  value={tempArr.range_to_date}
                >
                  {!tempArr.range_to_date && <View className='mepty'>
                    请选择日期
                    <Text className='ret'>{`>`}</Text>
                  </View>}
                  {tempArr.range_to_date && <View className='value' style={`color:${tempArr.range_to_date ? '#000' : '#c5c5c5'};`}>
                    {tempArr.range_to_date}
                    {this.flag && <Text className='ret'>{`>`}</Text>}
                  </View>}
                </Picker>
              </View>
            </View>
            <View className='product-form-block-item border-bottom'>
              <View className='product-form-block-item-left require'>
                结束时间
              </View>
              <View className='product-form-block-item-right t-a-r'>
                <Picker
                  disabled={!this.flag}
                  mode='multiSelector' // 多列选择
                  onChange={({detail: {value}}) => this.handleChangeTemp('range_to_time', value)} // change事件
                  range={rangeTimeData} //需要展示的数据
                  value={tempArr.range_to_time} // 选择的下标
                >
                  {!tempArr.range_to_time && <View className='mepty'>
                    请选择时间
                    <Text className='ret'>{`>`}</Text>
                  </View>}
                  {tempArr.range_to_time && <View className='value' style={`color:${tempArr.range_to_time ? '#000' : '#c5c5c5'};`}>
                    {tempArr.range_to_time}
                    {this.flag && <Text className='ret'>{`>`}</Text>}
                  </View>}
                </Picker>
              </View>
            </View>
          </View>}
          {tempArr.validity_info.validity_type && tempArr.validity_info.validity_type == 'RELATIVE' && <View className='product-form-block-item border-bottom'>
            <View className='product-form-block-item-left require'>
              有效天数
            </View>
            <View className='product-form-block-item-right t-a-l'>
              <View className='value proportion-after proportion-after-days'>
                <Input
                  disabled={!this.flag}
                  placeholder='请输入天数'
                  type='number'
                  onBlur={({detail: {value}}) => {
                    tempArr.validity_info.validity_period = parseInt(value);
                    this.setFormData(tempArr);
                  }}
                  value={tempArr.validity_info.validity_period}
                />
              </View>
            </View>
          </View>}
        </View>
        {/*商品备注信息*/}
        <View className='product-form-block m-t-20'>
          <View className='product-form-block-item border-bottom'>
            <View className='product-form-block-item-left'>
              商品备注
            </View>
            <View className='product-form-block-item-right t-a-l'>
              <View className='value'>
                <Input
                  disabled={!this.flag}
                  placeholder='请输入商品备注信息'
                  onInput={({detail: {value}}) => {
                    tempArr.item_combo_package.package_notes[0] = value
                    this.setState({tempArr});}}
                  value={tempArr.item_combo_package.package_notes[0]}
                />
              </View>
            </View>
          </View>
        </View>
        {/*套餐详情内容*/}
        {tempArr.item_combo_package.package_content_list && tempArr.item_combo_package.package_content_list.length > 0 &&
        tempArr.item_combo_package.package_content_list.map((item, index) =><View className='product-form-block border-bottom' key={index}>
          {/*标题*/}
          <View className='product-form-block-item'>
            <View className='product-form-block-item-left'>
              套餐详情
            </View>
            <View className='product-form-block-item-right meal-info-add t-a-r'>
              <View className='value'>
                {index == 0 && this.flag && <View className='wrap-icon-ic'>
                  <Text className='meal-info-add-btn' onClick={this.addMealInfo.bind(this)}>新增</Text>
                </View>}
                {index != 0 && this.flag && <View className='wrap-icon-ic'>
                  <Text className='meal-info-add-btn' onClick={this.delMealInfo.bind(this, index)}>删除</Text>
                </View>}
              </View>
            </View>
          </View>
          {/*套餐内容*/}
          <View className='out-meal-info'>
            {tempArr.item_combo_package.package_content_list[index].content_unit_list && tempArr.item_combo_package.package_content_list[index].content_unit_list.length > 0 &&
            tempArr.item_combo_package.package_content_list[index].content_unit_list.map((item2, index2) =>
              <View key={index2}>
                <View className='meal-info'>
                  {index2 == 0 && <View className='product-form-block-item'>
                    <View className='product-form-block-item-left'>
                      标题
                    </View>
                    <View className='product-form-block-item-right t-a-l'>
                      <View className='value'>
                        <Input
                          disabled={!this.flag}
                          placeholder='标题限制15个汉字，30个英文字符'
                          onInput={({detail: {value}}) => {
                            tempArr.item_combo_package.package_content_list[index].title = value
                            this.setState({tempArr});}}
                          value={tempArr.item_combo_package.package_content_list[index].title}
                        />
                      </View>
                    </View>
                  </View>}
                  <View className='border-bottom meal-info-content-box'>
                    <View className='meal-info-content-box-top1'>
                      <Text className='meal-info-content-box-text one'>每</Text>
                      <View className='meal-info-content-box-input two'>
                        <Input
                          disabled={!this.flag}
                          type='number'
                          placeholder='请输入数量'
                          onBlur={({detail: {value}}) => {
                            tempArr.item_combo_package.package_content_list[index].content_unit_list[index2].num = parseInt(value)
                            this.setState({tempArr});}}
                          value={tempArr.item_combo_package.package_content_list[index].content_unit_list[index2].num}
                        />
                      </View>
                      <Text className='meal-info-content-box-text three'>数量的</Text>
                      <View className='meal-info-content-box-input four'>
                        <Input
                          disabled={!this.flag}
                          placeholder='请输入单位'
                          onInput={({detail: {value}}) => {
                            tempArr.item_combo_package.package_content_list[index].content_unit_list[index2].unit = value
                            this.setState({tempArr});}}
                          value={tempArr.item_combo_package.package_content_list[index].content_unit_list[index2].unit}
                        />
                      </View>
                    </View>
                    <View className='meal-info-content-box-top2'>
                      <Text className='meal-info-content-box-text one'></Text>
                      <View className='meal-info-content-box-input product-name two'>
                        <Input
                          disabled={!this.flag}
                          placeholder='请输入产品名'
                          onInput={({detail: {value}}) => {
                            tempArr.item_combo_package.package_content_list[index].content_unit_list[index2].title = value
                            this.setState({tempArr});}}
                          value={tempArr.item_combo_package.package_content_list[index].content_unit_list[index2].title}
                        />
                      </View>
                      <Text className='meal-info-content-box-text three'>售价为</Text>
                      <View className='meal-info-content-box-input four'>
                        <Input
                          disabled={!this.flag}
                          type='digit'
                          placeholder='请输入金额'
                          onBlur={({detail: {value}}) => {
                            tempArr.item_combo_package.package_content_list[index].content_unit_list[index2].price = Number(value) > 0 ? Number(value).toFixed(2) : 0
                            this.setState({tempArr});}}
                          value={tempArr.item_combo_package.package_content_list[index].content_unit_list[index2].price}
                        />
                      </View>
                      <Text className='meal-info-content-box-text five'>元</Text>
                    </View>
                  </View>
                </View>
                {this.flag && <View className='product-form-block-item-add-btn-new'>
                  <View className='value'>
                    {index2 == 0 && this.flag && <View className='wrap-icon-ic'>
                      <View className='product-form-block-item-add-btn-btn'onClick={this.addMealInfoContent.bind(this, index)}>
                        新增
                      </View>
                    </View>}
                    {index2 != 0 && this.flag && <View className='wrap-icon-ic'>
                      <View className='product-form-block-item-add-btn-btn'onClick={this.delMealInfoContent.bind(this, index, index2)}>
                        删除
                      </View>
                    </View>}
                  </View>
                </View>}
              </View>
            )}
          </View>
        </View>)}
        {/*套餐图文内容*/}
        <View className='product-form-block m-t-20'>
        <View className='product-form-block border-bottom'>
          {/*标题*/}
          <View className='product-form-block-item'>
            <View className='product-form-block-item-left'>
              套餐图文
            </View>
            <View className='product-form-block-item-right meal-info-add t-a-r'></View>
          </View>
          {/*套餐内容*/}
          <View className='out-meal-info'>
          {tempArr.item_combo_package.graphic_text_list && tempArr.item_combo_package.graphic_text_list.length > 0 &&
          tempArr.item_combo_package.graphic_text_list.map((item, index) =>
          <View key={index}>
            <View className='meal-info'>
              <View className='border-bottom'>
                <View className='product-form-block-item picture-info-item'>
                  <View className='product-form-block-item-left'>
                    上传图片
                  </View>
                  <View className='product-form-block-item-right'>
                    <View className='product-form-block-group'>
                      {!!tempArr.item_combo_package.graphic_text_list[index].image_urls && tempArr.item_combo_package.graphic_text_list[index].image_urls.map((itemPic, indexPic) => <View key={indexPic} className='_image-border'>
                        {this.flag && <View className='_close' onClick={(e) => {
                          tempArr.item_combo_package.graphic_text_list[index].image_urls.splice(indexPic, 1)
                          this.setState({tempArr})
                          e.stopPropagation();
                        }}
                        >
                          <Text className='_font'>
                            x
                          </Text>
                        </View>}
                        <Image src={itemPic} className='_image' onClick={() => this.imgClick(itemPic)} />
                      </View>)}
                      {this.flag && tempArr.item_combo_package.graphic_text_list[index].image_urls && tempArr.item_combo_package.graphic_text_list[index].image_urls.length < 5 &&
                      <View className='image-border' onClick={() => this.onFileChangePic(index)}>
                        <View className='add'>+</View>
                      </View>}
                    </View>
                    {this.flag && <View className='picture-info-item-tip'>
                      支持bmp,png,jpeg,jpg,gif格式建议宽高：1242*698px图片大小≤5M最多5张
                    </View>}
                  </View>
                </View>
                <View className='product-form-block-item'>
                  <View className='product-form-block-item-left'>
                    图片名称
                  </View>
                  <View className='product-form-block-item-right t-a-l'>
                    <View className='value'>
                      <Input
                        disabled={!this.flag}
                        placeholder='请输入图片名称'
                        onInput={({detail: {value}}) => {
                          tempArr.item_combo_package.graphic_text_list[index].title = value
                          this.setState({tempArr});}}
                        value={tempArr.item_combo_package.graphic_text_list[index].title}
                      />
                    </View>
                  </View>
                </View>
                <View className='product-form-block-item'>
                  <View className='product-form-block-item-left'>
                    图片描述
                  </View>
                  <View className='product-form-block-item-right t-a-l'>
                    <View className='value'>
                      <Input
                        disabled={!this.flag}
                        placeholder='请输入图片描述'
                        onInput={({detail: {value}}) => {
                          tempArr.item_combo_package.graphic_text_list[index].desc = value
                          this.setState({tempArr});}}
                        value={tempArr.item_combo_package.graphic_text_list[index].desc}
                      />
                    </View>
                  </View>
                </View>
              </View>
            </View>
            {this.flag && <View className='product-form-block-item-add-btn-new'>
              <View className='value'>
                {index == 0 && this.flag && <View className='wrap-icon-ic'>
                  <View className='product-form-block-item-add-btn-btn'onClick={this.addMealPicInfoContent.bind(this, index)}>
                    新增
                  </View>
                </View>}
                {index != 0 && this.flag && <View className='wrap-icon-ic'>
                  <View className='product-form-block-item-add-btn-btn'onClick={this.delMealPicInfoContent.bind(this, index)}>
                    删除
                  </View>
                </View>}
              </View>
            </View>}
          </View>
          )}
          </View>
        </View>
        </View>

        {/**/}
        <View className='product-form-block m-t-20'>
          <Picker
            disabled={!this.flag}
            mode='selector'
            range={isOrNot}
            rangeKey='label'
            onChange={({detail: {value}}) => this.handleChangeTemp('buyer_tips_template', value, 'need_reserve')}
            value={tempArr.buyer_tips_template.need_reserve}
          >
            <View className='product-form-block-item border-bottom'>
              <View className='product-form-block-item-left require'>
                预约
              </View>
              <View className='product-form-block-item-right t-a-r'>
                {!String(tempArr.buyer_tips_template.need_reserve) && <View className='mepty'>
                  请选择
                  <Text className='ret'>{`>`}</Text>
                </View>}
                {String(tempArr.buyer_tips_template.need_reserve) && isOrNot && isOrNot.map((item, index) => <View
                  className='value' key={index}
                >
                  {item.value == String(tempArr.buyer_tips_template.need_reserve) ? item.label : ''}
                  {index ==0 && this.flag && <Text className='ret'>{`>`}</Text>}
                </View>)}
              </View>
            </View>
          </Picker>
          <Picker
            disabled={!this.flag}
            mode='selector'
            range={isOrNot}
            rangeKey='label'
            onChange={({detail: {value}}) => this.handleChangeTemp('buyer_tips_template', value, 'free_wifi')}
            value={tempArr.buyer_tips_template.free_wifi}
          >
            <View className='product-form-block-item border-bottom'>
              <View className='product-form-block-item-left require'>
                免费WIFI
              </View>
              <View className='product-form-block-item-right t-a-r'>
                {!String(tempArr.buyer_tips_template.free_wifi) && <View className='mepty'>
                  请选择
                  <Text className='ret'>{`>`}</Text>
                </View>}
                {String(tempArr.buyer_tips_template.free_wifi) && isOrNot && isOrNot.map((item, index) => <View
                  className='value' key={index}
                >
                  {item.value == String(tempArr.buyer_tips_template.free_wifi) ? item.label : ''}
                  {index == 0 && this.flag && <Text className='ret'>{`>`}</Text>}
                </View>)}
              </View>
            </View>
          </Picker>
          <Picker
            disabled={!this.flag}
            mode='selector'
            range={isOrNot}
            rangeKey='label'
            onChange={({detail: {value}}) => this.handleChangeTemp('buyer_tips_template', value, 'free_park')}
            value={tempArr.buyer_tips_template.free_park}
          >
            <View className='product-form-block-item border-bottom'>
              <View className='product-form-block-item-left require'>
                免费停车
              </View>
              <View className='product-form-block-item-right t-a-r'>
                {!String(tempArr.buyer_tips_template.free_park) && <View className='mepty'>
                  请选择
                  <Text className='ret'>{`>`}</Text>
                </View>}
                {String(tempArr.buyer_tips_template.free_park) && isOrNot && isOrNot.map((item, index) => <View
                  className='value' key={index}
                >
                  {item.value == String(tempArr.buyer_tips_template.free_park) ? item.label : ''}
                  {index==0 && this.flag && <Text className='ret'>{`>`}</Text>}
                </View>)}
              </View>
            </View>
          </Picker>
          {String(tempArr.buyer_tips_template.free_park) == 'false' && <View className='product-form-block-item border-bottom'>
            <View className='product-form-block-item-left product-form-block-item-left-long require'>
              每小时停车费
            </View>
            <View className='product-form-block-item-right t-a-l'>
              <View className='value proportion-after proportion-after-money'>
                <Input
                  disabled={!this.flag}
                  placeholder='请输入金额'
                  type='digit'
                  onBlur={({detail: {value}}) => {
                    tempArr.buyer_tips_template.park_fee_per_hour = Number(value) > 0 ? Number(value).toFixed(2) : 0
                    this.setState({tempArr})
                  }}
                  value={tempArr.buyer_tips_template.park_fee_per_hour}
                />
              </View>
            </View>
          </View>}
          {String(tempArr.buyer_tips_template.free_park) == 'false' && <View className='product-form-block-item border-bottom'>
            <View className='product-form-block-item-left product-form-block-item-left-long require'>
              停车封顶金额
            </View>
            <View className='product-form-block-item-right t-a-l'>
              <View className='value proportion-after proportion-after-money'>
                <Input
                  disabled={!this.flag}
                  placeholder='请输入金额'
                  type='digit'
                  value={tempArr.buyer_tips_template.park_fee_upper_bound_per_day}
                  onBlur={({detail: {value}}) => this.parkFeeUpperBoundPerDay(value)}
                />
              </View>
            </View>
          </View>}
          <Picker
            disabled={!this.flag}
            mode='selector'
            range={isOrNot}
            rangeKey='label'
            onChange={({detail: {value}}) => this.handleChangeTemp('buyer_tips_template', value, 'limit_user_num')}
            value={tempArr.buyer_tips_template.limit_user_num}
          >
            <View className='product-form-block-item border-bottom'>
              <View className='product-form-block-item-left product-form-block-item-left-long require'>
                限制用户数
              </View>
              <View className='product-form-block-item-right t-a-r'>
                {!String(tempArr.buyer_tips_template.limit_user_num)&& <View className='mepty'>
                  请选择
                  <Text className='ret'>{`>`}</Text>
                </View>}
                {String(tempArr.buyer_tips_template.limit_user_num) && isOrNot && isOrNot.map((item,index) => <View
                  className='value' key={index}
                >
                  {item.value == String(tempArr.buyer_tips_template.limit_user_num) ? item.label : ''}
                  {index ==0 && this.flag && <Text className='ret'>{`>`}</Text>}
                </View>)}
              </View>
            </View>
          </Picker>
          {String(tempArr.buyer_tips_template.limit_user_num) == 'true' && <View className='product-form-block-item border-bottom'>
            <View className='product-form-block-item-left product-form-block-item-left-long require'>
              限制人数使用
            </View>
            <View className='product-form-block-item-right t-a-l'>
              <View className='value proportion-after proportion-after-people'>
                <Input
                  disabled={!this.flag}
                  placeholder='请输入数量'
                  type='number'
                  onInput={({detail: {value}}) => this.handleChangeTemp('buyer_tips_template', value, 'user_num_limited')}
                  value={tempArr.buyer_tips_template.user_num_limited}
                />
              </View>
            </View>
          </View>}
          <Picker
            disabled={!this.flag}
            mode='selector'
            range={isOrNot}
            rangeKey='label'
            onChange={({detail: {value}}) => this.handleChangeTemp('buyer_tips_template', value, 'supply_invoice')}
            value={tempArr.buyer_tips_template.supply_invoice}
          >
            <View className='product-form-block-item border-bottom'>
              <View className='product-form-block-item-left require'>
                提供发票
              </View>
              <View className='product-form-block-item-right t-a-r'>
                {!String(tempArr.buyer_tips_template.supply_invoice) && <View className='mepty'>
                  请选择
                  <Text className='ret'>{`>`}</Text>
                </View>}
                {String(tempArr.buyer_tips_template.supply_invoice) && isOrNot && isOrNot.map((item, index) => <View
                  className='value' key={index}
                >
                  {item.value == String(tempArr.buyer_tips_template.supply_invoice) ? item.label : ''}
                  {index==0 && this.flag && <Text className='ret'>{`>`}</Text>}
                </View>)}
              </View>
            </View>
          </Picker>
          {String(tempArr.buyer_tips_template.supply_invoice) == 'true' && <Picker
            disabled={!this.flag}
            mode='selector'
            range={invoiceList}
            rangeKey='label'
            onChange={({detail: {value}}) => this.handleChangeTemp('buyer_tips_template', value, 'invoice_types')}
            value={tempArr.buyer_tips_template.invoice_types}
          >
            <View className='product-form-block-item border-bottom'>
              <View className='product-form-block-item-left require'>
                发票类型
              </View>
              <View className='product-form-block-item-right t-a-r'>
                {!tempArr.buyer_tips_template.invoice_types && <View className='mepty'>
                  请选择
                  <Text className='ret'>{`>`}</Text>
                </View>}
                {tempArr.buyer_tips_template.invoice_types && invoiceList && invoiceList.map((item, index) => <View
                  className='value' key={index}
                >
                  {item.value == tempArr.buyer_tips_template.invoice_types ? item.label : ''}
                  {index ==0 && this.flag && <Text className='ret'>{`>`}</Text>}
                </View>)}
              </View>
            </View>
          </Picker>}
          <Picker
            disabled={!this.flag}
            mode='selector'
            range={isOrNot}
            rangeKey='label'
            onChange={({detail: {value}}) => this.handleChange('is_purchase', value)}
            value={formData.is_purchase}
          >
            <View className='product-form-block-item border-bottom'>
              <View className='product-form-block-item-left require'>
                是否限购
              </View>
              <View className='product-form-block-item-right t-a-r'>
                {!String(formData.is_purchase) && <View className='mepty'>
                  请选择
                  <Text className='ret'>{`>`}</Text>
                </View>}
                {String(formData.is_purchase) && isOrNot && isOrNot.map((item, index) => <View
                  className='value' key={index}
                >
                  {item.value == String(formData.is_purchase) ? item.label : ''}
                  {index == 0 && this.flag && <Text className='ret'>{`>`}</Text>}
                </View>)}
              </View>
            </View>
          </Picker>
          <Picker
            disabled={!this.flag}
            mode='selector'
            range={isOrNot}
            rangeKey='label'
            onChange={({detail: {value}}) => this.handleChange('allow_check_refund', value)}
            value={formData.allow_check_refund}
          >
            <View className='product-form-block-item border-bottom'>
              <View className='product-form-block-item-left require'>
                商家审核退
              </View>
              <View className='product-form-block-item-right t-a-r'>
                {!String(formData.allow_check_refund) && <View className='mepty'>
                  请选择
                  <Text className='ret'>{`>`}</Text>
                </View>}
                {String(formData.allow_check_refund) && isOrNot && isOrNot.map((item, index) => <View
                  className='value' key={index}
                >
                  {item.value == String(formData.allow_check_refund) ? item.label : ''}
                  {index==0 && this.flag && <Text className='ret'>{`>`}</Text>}
                </View>)}
              </View>
            </View>
          </Picker>
          <Navigator url={`/main/productForm/edit?key=upload_detail_images&type=${!this.flag ? 'onlyView' : ''}&value=` + encodeURIComponent(formData.upload_detail_images)}>
            <View className='product-form-block-item border-bottom'>
              <View className='product-form-block-item-left require c-fff'>
                详情信息
              </View>
              <View className='product-form-block-item-right t-a-r'>
                <View className='mepty'>
                  {formData.upload_detail_images ? '已添加' : '未添加'}
                  <Text className='ret'>{`>`}</Text>
                </View>
              </View>
            </View>
          </Navigator>
        </View>
        {this.flag && <View style='height: 75px;'></View>}
        {this.flag && <View className={`${TARO_ENV === 'h5' ? "product-foot-btn" : "product-foot-btn-weapp"}`}>
          <View className={`default ${TARO_ENV === 'h5' ? "btn h5-small active" : "btn active"}`}
            onClick={() => this.goBack()}
          >返回列表</View>
          <View className={`${TARO_ENV === 'h5' ? "btn h5-small active" : "btn active"}`}
            onClick={() => this.save(0)}
            style={`background-color: ${process.env.mainColor}`}
          >保存信息</View>
          <View className={`${TARO_ENV === 'h5' ? "btn h5-small active" : "btn active"}`}
            onClick={() => this.save(1)}
            style={`background-color: ${process.env.mainColor}`}
          >提交审核</View>
        </View>}
      </View>
    )
  }
}

export default productForm as ComponentClass;
